<template>
  <!-- 出入库管理 -->
  <div class="app-page">
    <el-tabs
      ref="inventorySearchRef"
      v-model="activeTabName"
      type="card"
    >
      <el-tab-pane v-if="$hasTabPermission(7040101)" label="供应站库存" name="supplyStations">
        <supplyStations ref="supplyStations" :good-t-list="goodTList" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(7040103)" label="气站库存" name="bottleInventory">
        <bottleInventory ref="bottleInventory" :good-t-list="goodTList" />
      </el-tab-pane>
      <el-tab-pane v-if="$hasTabPermission(7040102)" label="配送员库存" name="couriers">
        <couriers ref="couriers" :good-t-list="goodTList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { goodsTypeQueryAllList, queryGoodsList } from '@/api'
  import couriers from './components/couriers'
  import supplyStations from './components/supplyStations'
  import bottleInventory from './components/bottleInventory'
  export default {
    name: 'inventorySearch',
    components: {
      supplyStations,
      couriers,
      bottleInventory
    },
    data() {
      return {
        activeTabName: 'warehouse',
        goodTList: []
      }
    },

    async created() {
      await this.getGoodDefalultData()
    },
    mounted() {
      this.activeTabName = this.$refs.inventorySearchRef.panes[0].name
    },
    methods: {
      async getGoodDefalultData() {
        const res = await goodsTypeQueryAllList({})
        if (res && res.data) {
          const gId = res.data.find(item => item.gtFlag === 2)
          if (gId && gId.gtId) {
            const query = {
              gtId: gId.gtId,
              currentPage: 1,
              pageSize: 999
            }
            const res = await queryGoodsList(query)
            this.goodTList = res.data.rows
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-page {
  padding: 0;
  margin: 0;
  /deep/.el-tabs__header {
    margin: 0 0 10px;
  }
}
</style>
